Vue.component("j-view-setting", {
  template: `<div style="">
        <Modal :loading="true" v-model="show" title="预览页工具条设置" :width="650" @on-ok="onViewSettingSave" @on-cancel="onViewSettingCancel" class="expression">
            <div style="height: 30px">
                <Checkbox v-model="showViewToolbar">显示工具栏：</Checkbox>
                <div style="height: 30px;float: right;margin-right: 5px">
                    <Button @click="resetViewToolbar" size="small">恢复默认</Button>
                </div>
            </div>
            <div style="padding: 9px;margin-top:2px;background: rgb(228 229 230);border-bottom: 1px solid #e0e2e4;height: 40px;text-align: left;">
                <div v-if="showViewToolbar" style="height: 22px;line-height: 22px;display: inline-block" class="view-toolbar-container">
                    <Icon
                      v-for="(item,index) in btnList"
                      v-if="isSelected(item.index)"
                      :key="index"
                      :type="item.icon"
                      :size="viewSettingFont"
                      :title="item.title"
                      :class="item.transform?'transform-icon':''"/>
                </div>
                <div style="height: 22px;line-height: 22px;float: right;margin-right: 5px">
                    <Button @click="clearViewToolbar" size="small" style="">清空</Button>
                </div>
            </div>

            <div style="cursor: pointer;background: #fff;margin-top:5px;padding: 2px" class="view-toolbar-list">
                <Row>
                    <Col span="8" v-for="(item,index) in btnList" :key="index">
                        <div style="height: 30px;line-height: 30px" @click="handleClickToolbarBtn(item)">
                            <Icon :type="item.icon" :size="viewSettingFont" :class="item.transform?'transform-icon':''"/>
                            {{ item.title }}
                            <span v-if="isSelected(item.index)" style="float: right;font-size: 20px">·</span>
                        </div>
                    </Col>
                </Row>
            </div>

            <div style="margin-top: 10px">
                <Row>
                    <Col span="4">
                        <span style="display:inline-block;height: 30px;line-height: 30px;">每页展示条数：</span>
                    </Col>
                    <Col span="4">
                        <i-input type="number" v-model="pageSize" @on-change="handleViewPageSizeChange"></i-input>
                    </Col>
                </Row>
            </div>
        </Modal>
    </div>`,
  props: {
    show: {
      type: Boolean,
      required: false,
      default: false,
    },
    settings: {
      type: Object,
      required: false,
      default: () => {},
    },
  },
  data() {
    return {
      enableViewSetting: true,
      viewSettingFont: 20,
      btnList: [
        { icon: "ios-skip-backward", title: "首页", index: 1 },
        { icon: "ios-play", title: "上一页", transform: true, index: 2 },
        { icon: "ios-paper", title: "当前页/总页数", index: 3 },
        { icon: "md-podium", title: "分页显示数", index: 4 },
        { icon: "ios-play", title: "下一页", index: 5 },
        { icon: "ios-skip-forward", title: "末页", index: 6 },
        { icon: "ios-print", title: "打印", index: 7 },
        { icon: "ios-cloud-download", title: "导出", index: 8, code: "" },
        { icon: "md-switch", title: "清晰度设置", index: 9, code: "" },
      ],
      selectList: [],
      selectedIndexList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      showViewToolbar: true,
      pageSize: "",
    };
  },
  watch: {
    settings: {
      deep: true,
      immediate: true,
      handler: function () {
        this.resetForm();
      },
    },
  },
  methods: {
    onViewSettingSave() {
      let btnList = this.selectedIndexList;
      if (btnList.length == 0) {
        btnList.push(999);
      }
      let param = {
        show: this.showViewToolbar,
        btnList: btnList,
        pageSize: this.pageSize,
      };
      this.$emit("change", param);
    },
    resetForm() {
      if (this.settings) {
        const { show, btnList, pageSize } = this.settings;
        if (show === false) {
          this.showViewToolbar = false;
        } else {
          this.showViewToolbar = true;
        }
        if (btnList) {
          if (btnList.length == 0) {
            this.selectedIndexList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
          } else {
            this.selectedIndexList = [...btnList];
          }
        }
        if (pageSize) {
          this.pageSize = pageSize;
        }
      }
    },
    onViewSettingCancel() {
      this.$emit("change", false);
    },
    handleClickToolbarBtn(item) {
      console.log("handleClickToolbarBtn", item);
      let index = item.index;
      let position = this.selectedIndexList.indexOf(index);
      if (position >= 0) {
        this.selectedIndexList.splice(position, 1);
      } else {
        this.selectedIndexList.push(index);
      }
    },
    isSelected(index) {
      if (this.selectedIndexList.indexOf(index) >= 0) {
        return true;
      } else {
        return false;
      }
    },
    resetViewToolbar() {
      this.showViewToolbar = true;
      this.selectedIndexList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    },
    clearViewToolbar() {
      this.selectedIndexList = [];
    },
    hideViewToolbar() {
      this.showViewToolbar = false;
    },
    handleViewPageSizeChange(e) {
      if (!e.target.value) {
        this.pageSize = "";
      } else if (e.target.value < 1) {
        this.pageSize = 10;
      }
    },
  },
});
